<template>
    <div class="contentTagList">
        <div class="topTitle" @click="handleTopRouterTo">{{topTitle}}</div>
        
        <div class="content">
            <div class="content_listBox">
                <div
                class="list"
                v-for="(item, index) in listData"
                :key="item.treeId ? item.treeId : index"
                @click="handleRouterTo(item)"
                >
                    <div class="title van-ellipsis">{{item.label}}</div>
                    <van-image
                    fit="cover"
                    v-show="isEdit"
                    class="sidebar_edit" width="10" height="10"
                    :src="require('assets/images/edit.png')"
                    @click.stop="handleEditClick(item, index)"
                    />
                    <van-image
                    fit="cover"
                    v-show="isDelete"
                    class="sidebar_delete" width="10" height="10"
                    :src="require('assets/images/delete.png')"
                    @click.stop="handleDeleteClick(item, index)"
                    />
                </div>
            </div>
            
            <van-empty v-if="!listData.length > 0" description="数据为空" />
        </div>

        <!-- 编辑dialog -->
        <van-dialog
        class="editDialog"
        v-model="editDialogVisible"
        title="编辑文件夹"
        show-cancel-button
        closeOnClickOverlay
        @confirm="handleConfirmClick"
        >
            <van-field v-model="editDialogValue" placeholder="编辑文件夹" />
        </van-dialog>
    </div>
</template>

<script>
export default {
    name: 'contentTagList',
    props: {
        // 顶部文字
        topTitle: {
            type: String,
            default: ''
        },
        // 标签数据
        contentListData: {
            type: Array,
            default: function(){
                return []
            }
        },
        // 是否显示编辑
        isEdit: {
            type: Boolean,
            default: false
        },
        // 是否显示删除
        isDelete: {
            type: Boolean,
            default: false
        },

        // 当前选中的侧边栏treeId
        currentTreeId: {
            type: Object
        }
    },
    data(){
        return {
            // 编辑dialog
            editDialogVisible: false,
            editDialogValue: '',
            TreeId: 0,
            Index: 0,
            listData: this.contentListData
        }
    },
    methods: {
        // 监听编辑点击事件
        handleEditClick(item, index){
            // console.log(item)
            this.editDialogVisible = true
            this.editDialogValue = item.label
            this.TreeId = item.treeId
            this.Index = index
        },
        // 监听删除点击事件
        handleDeleteClick(item, index){
            // console.log(item)
            this.TreeId = item.treeId
            this.Index = index
            
            // 删除dialog
            this.$dialog.confirm({
                message: '是否删除该收藏夹?',
            }).then(() => {
                this.$request({
                    method: 'post',
                    url: "/api/FavouriteTree/Delete?Token=" + sessionStorage.getItem("mobileToken"),
                    data: {
                        TreeId: this.TreeId
                    }
                }).then(({data}) => {
                    if(data.code == 200){
                        this.listData.splice(index, 1)
                        this.$notify({type: 'success', message: data.msg})
                    }else{
                        this.$notify(data.msg)
                    }
                })
                
            })
        },
        handleTopRouterTo(){
            // console.log(JSON.stringify(this.currentTreeId))
            switch(this.$route.name){
                case 'KnowledgeTreeMenu':
                    this.$router.push({name: 'KnowledgeTreeList', params: {item: JSON.stringify(this.currentTreeId)}}).catch(err => {err})
                break;
                case 'FavouriteTreeMenu':
                    this.$router.push({name: 'FavouriteTreeList', params: {item: JSON.stringify(this.currentTreeId)}}).catch(err => {err})
                break;
            }
        },
        // 监听点击二级菜单路由跳转
        handleRouterTo(item){
            // console.log(item)
            switch(this.$route.name){
                case 'KnowledgeTreeMenu':
                    this.$router.push({name: 'KnowledgeTreeList', params: {item: JSON.stringify(item)}}).catch(err => {err})
                break;
                case 'FavouriteTreeMenu':
                    this.$router.push({name: 'FavouriteTreeList', params: {item: JSON.stringify(item)}}).catch(err => {err})
                break;
            }
        },

        // 编辑确定提交事件
        handleConfirmClick(){
            let NodeName = this.editDialogValue
            let TreeId = this.TreeId
            this.$request({
                method: 'post',
                url: "/api/FavouriteTree/Edit?Token=" + sessionStorage.getItem("mobileToken"),
                data: {
                    NodeName,
                    TreeId
                }
            }).then(({data}) => {
                // console.log(data)
                if(data.code == 200){
                    this.listData[this.Index].label = NodeName
                    this.$notify({type: 'success', message: data.msg})
                }else{
                    this.$notify(data.msg)
                }
            })
        }
    },
    watch: {
        contentListData(newVal){
            this.listData = newVal
        },
        editDialogVisible(newVal){
            if(!newVal){
                this.editDialogValue = ''
            }
        }
    }
}
</script>

<style lang="less" scoped>
.contentTagList{
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: 15px 15px 0 15px;
    .topTitle{
        font-size: 15px;
        color: #2a2b2d;
        font-weight: 600;
        margin-bottom: 15px;
    }
    .content{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        .content_listBox{
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .list{
                width: 50%;
                max-width: 117px;
                border: 1px solid #f1f1f1;
                border-radius: 30px;
                margin-right: 10px;
                margin-bottom: 10px;
                padding: 7px 8.5px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .title{
                    color: #2a2b2d;
                    font-size: 14px;
                    // max-width: 46px;
                    max-width: 100%;
                }
                &:nth-child(2n){
                    margin-right: 0;
                }
                // &:nth-child(-n+2){
                //     margin-bottom: 0;
                // }
            }
        }
    }
    
}
</style>